<template>
    <div class="sexSelect">
      性别
      <span :class="{sexActive: sexMActive}" class="sexM" @click="selectSex('M')">男</span>
      <span :class="{sexActive: sexFActive}" class="sexF" @click="selectSex('F')">女</span>
    </div>
</template>

<script>
export default {
  name: 'sexSelect',
  props: ['sex'],
  data () {
    return {
      sexMActive: true,
      sexFActive: false
    }
  },
  mounted () {
    if (this.sex === 'M' || !this.sex) {
      this.sexMActive = true
      this.sexFActive = false
    } else if (this.sex === 'F') {
      this.sexMActive = false
      this.sexFActive = true
    }
  },
  methods: {
    selectSex (sex) {
      if (sex === 'M') {
        this.sexMActive = true
        this.sexFActive = false
      } else if (sex === 'F') {
        this.sexMActive = false
        this.sexFActive = true
      }
      this.$emit('getSex', sex)
    }
  }
}
</script>

<style scoped>
  .sexSelect {
    padding: 5px 15px;
    font-size: 14px;
    position: relative;
    color: #535353;
    line-height: 27px;
  }
  .sexF {
    width: 50px;
    height: 25px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    text-align: center;
    line-height: 27px;
    position: absolute;
    right: 15px;
    font-size: 14px;
  }
  .sexM {
    width: 50px;
    height: 25px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    text-align: center;
    line-height: 27px;
    position: absolute;
    right: 75px;
    font-size: 14px;
  }
  .sexActive {
    color: #3f9aff;
    border: 1px solid #3f9aff;
  }
</style>
